import React, { FC } from "react";
import { Link, useNavigate } from "react-router-dom";
import { Typography, Form, Button, Input, Space, message } from "antd";
import { UserAddOutlined } from "@ant-design/icons";
import { LOGIN_PATHNAME } from "../router";
import style from "./login.module.scss";
import { registerServer } from "../services/user";
import { useRequest } from "ahooks";
import useNavPage from "../hooks/useNavPage";
import useGetUserData from "../hooks/useGetuserData";

const { Title } = Typography;
const Register: FC = () => {
  // 打开注册页时判断是否已经登陆
  // const { waitingUserData } = useGetUserData();
  // useNavPage(waitingUserData);

  const nav = useNavigate();
  const { run, loading } = useRequest(
    async (value) => {
      const { username, password, nickname } = value;
      return await registerServer(username, password, nickname);
    },
    {
      manual: true,
      onSuccess() {
        message.success("注册成功");
        // 跳转到登陆页面
        nav(LOGIN_PATHNAME);
      },
    }
  );

  const onFinish = (value: any) => {
    console.log(" register value", value);
    run(value);
  };

  return (
    <div className={style.container}>
      <div>
        <Space>
          <Title>
            <UserAddOutlined />
          </Title>
          <Title level={2}>用户注册</Title>
        </Space>
      </div>
      <div>
        <Form
          labelCol={{ span: 8 }}
          wrapperCol={{ span: 16 }}
          style={{ minWidth: "500px" }}
          onFinish={onFinish}
        >
          <Form.Item
            name="username"
            label="用户名"
            rules={[
              { required: true, message: "请输入用户名" },
              {
                type: "string",
                min: 5,
                max: 20,
                message: "用户名长度在5-20之间",
              },
              { pattern: /^\w+$/, message: "用户名只能是数组、字母、_" },
            ]}
          >
            <Input></Input>
          </Form.Item>
          <Form.Item
            name="password"
            label="密码"
            rules={[{ required: true, message: "请输入密码" }]}
          >
            <Input.Password></Input.Password>
          </Form.Item>
          <Form.Item
            name="confirm"
            label="确认密码"
            dependencies={["password"]} // 依赖项，当依赖项中的表单值发生改变时，触发下面的校验方法
            rules={[
              { required: true, message: "请输入密码" },
              //  校验函数：接收的参数geFieldValue是当前表单元素的信息，返回一个检验方法validator，第一个参数时当前表单元素的信息，第二个参数时当前表单的值
              ({ getFieldValue }) => ({
                validator(_, value) {
                  console.log("_:", _, "value:", value);
                  if (!value || getFieldValue("password") === value) {
                    return Promise.resolve();
                  } else {
                    return Promise.reject(new Error("两次密码不一致"));
                  }
                },
              }),
            ]}
          >
            <Input></Input>
          </Form.Item>
          <Form.Item name="nickname" label="昵称">
            <Input></Input>
          </Form.Item>
          <Form.Item wrapperCol={{ offset: 6, span: 20 }}>
            <Space>
              <Button htmlType="submit" type="primary">
                注册
              </Button>
              <Link to={LOGIN_PATHNAME}>已有账户请登陆</Link>
            </Space>
          </Form.Item>
        </Form>
      </div>
    </div>
  );
};

export default Register;
